<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TShock REST API</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 自定义样式 -->
    <style type="text/css">
        .btn-outline-secondary {
            --bs-btn-border-color: var(--bs-border-color);
        }

        .eye-open {
            display: inline-block;
            background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/><path fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
        }

        .eye-close {
            display: inline-block;
            background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/><path d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/><path d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/><path fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="row mx-1">
            <form id="form" action="#" method="get">
                <div class="input-group input-group-sm mb-1 mt-1">
                    <span class="input-group-text">IP</span>
                    <input class="col-6 form-control" id="ip" value="127.0.0.1">
                    <span class="input-group-text">端口</span>
                    <input class="col-6 form-control" id="port" value="7878">
                    <span class="input-group-text">token</span>
                    <input class="col-4 form-control input-password" type="password" id="token" name="token" value="">
                    <button class="btn btn-outline-secondary btn-sm eye-open" id="togglePassword"></button>
                </div>

                <div class="input-group input-group-sm mb-2">
                </div>

                <div class="input-group input-group-sm mb-1">
                    <span class="input-group-text">接口</span>
                    <input class="form-control" type="text" id="api">
                    <input class="form-control" type="text" id="rawCMD" value="/who" name="cmd" title="执行指令，需要管理员权限"
                        placeholder="指令" style="display:none;">
                    <select class="form-select input-group-sm col-1" id="apiSelect">
                    </select>
                </div>

                <div>
                    <button class="btn btn-outline-secondary btn-sm col-12" onclick="submitData()">发送</button>
                </div>
            </form>

        </div>
    </div>

    <script type="text/javascript">

        // 读取本地存储
        let arr = ["ip", "port", "token"]
        for (const key of arr) {
            if (localStorage.getItem(key) != null) {
                document.getElementById(key).value = localStorage.getItem(key)
            }
        }

        // 接口列表
        let apiList = [
            { key: "在线玩家", value: "v2/players/list" },
            { key: "在线玩家2", value: "lists/players" },
            { key: "执行指令", value: "v3/server/rawcmd" }
        ]
        var selectEl = document.getElementById("apiSelect")
        var apiEl = document.getElementById("api")
        var rawCMDEl = document.getElementById("rawCMD")
        selectEl.onchange = (e) => {
            apiEl.value = apiList[e.currentTarget.value].value
            showHideRawCMDEl()
        }

        var selectIndex = -1;
        if (localStorage.getItem("apiIndex") != null) {
            selectIndex = parseInt(localStorage.getItem("apiIndex"))
            if (isNaN(selectIndex)) {
                selectIndex = -1;
            }
        }
        for (let i = 0; i < apiList.length; i++) {
            const obj = apiList[i];
            selectEl.innerHTML += `<option value="${i}">${obj.key}</option>`
        }
        if (selectIndex != -1 && selectIndex < apiList.length) {
            let obj = apiList[selectIndex]
            selectEl.selectedIndex = selectIndex
            apiEl.value = obj.value
            showHideRawCMDEl()
        } else {
            apiEl.value = apiList[0].value
        }

        function showHideRawCMDEl() {
            if (parseInt(selectEl.value) == 2) {
                if (rawCMDEl.style.display == "none") {
                    rawCMDEl.style.display = "flex"
                }
            } else {
                if (rawCMDEl.style.display == "flex") {
                    rawCMDEl.style.display = "none"
                }
            }
        }

        function submitData() {
            const ipEl = document.getElementById('ip');
            const portEl = document.getElementById('port');
            const tokenEl = document.getElementById('token');

            localStorage.ip = ipEl.value
            localStorage.port = portEl.value
            localStorage.token = tokenEl.value
            localStorage.apiIndex = selectEl.value

            if (tokenEl.value === "") {
                alert("token不能为空！")
                return
            }
            const formEl = document.getElementById('form');
            form.action = `http://${ipEl.value}:${portEl.value}/${apiEl.value}`;
        }

        document.getElementById("togglePassword").onclick = (e) => {
            let tokenEl = document.getElementById('token')
            let btnEl = document.getElementById('togglePassword')
            let arr = Array.from(btnEl.classList)
            if (tokenEl.type == "password") {
                tokenEl.type = "text"
                if (arr.indexOf("eye-open")) {
                    btnEl.classList.remove("eye-open")
                }
                btnEl.classList.add("eye-close")
            } else {
                tokenEl.type = "password"
                if (arr.indexOf("eye-close")) {
                    btnEl.classList.remove("eye-close")
                }
                btnEl.classList.add("eye-open")
            }
        }
    </script>
</body>

</html>